import axios, { type Method } from 'axios'
import { useUserStore } from '@/stores/modules/user'
import { ElMessage } from 'element-plus'
import { localLogin } from '@/services/Application'
// 1. 新axios实例，基础配置
const baseURL = 'http://localhost:8084'
const instance = axios.create({
  baseURL,
  timeout: 10000
})

// 2. 请求拦截器，携带token
instance.interceptors.request.use(
  (config) => {
    const store = useUserStore()
    const token = store.user?.token
    if (token) {
      config.headers['token'] = `${token}`
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 3. 响应拦截器，剥离无效数据，401拦截
instance.interceptors.response.use(
  (res) => {
    // 后台约定，响应成功，但是code不是10000，是业务逻辑失败
    // if (res.data?.code !== 200) {
    //   return Promise.reject(res.data)
    // }
    // 业务逻辑成功，返回响应数据，作为axios成功的结果
    return res.data
  },
  async (err) => {
    //本地当token过去调这个接口从新去获取
    if (err.response.status === 500) {
      //const res = await localLogin()
      //const store = useUserStore()
      // store.setUser(res.token)
      //ElMessage.error('服务器错误')
    }
    // if (err.response.status === 401) {
    //   // 删除用户信息
    //   const store = useUserStore()
    //   store.delUser()
    //   // 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用
    //   router.push(`/login?returnUrl=${router.currentRoute.value.fullPath}`)
    // }
    return Promise.reject(err)
  }
)

export { baseURL, instance }
// 这个需要替换axsio.request默认的响应成功后的结果类型
// 之前是：传 { name: string } 然后res是   res = { data: { name: string } }
// 但现在：在响应拦截器中返回了 res.data  也就是将来响应成功后的结果，和上面的类型一致吗？
// 所以要：request<数据类型，数据类型>() 这样才指定了 res.data 的类型
// 但是呢：后台返回的数据结构相同，所以可以抽取相同的类型
type Data<T> = {
  token: string
  code: number
  message: string
  data: T
}
// 4. 请求工具函数
export const request = <T>(
  url: string,
  method: Method = 'get',
  submitData?: object
) => {
  return instance.request<T, Data<T>>({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}
